// webpack基于node
const path = require('path');
// HtmlWebpackPlugin再dist生成index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// vue-loader使用时需要导入下面这个包
// 注意: vue-loader的使用在webpack文档中并没有
// 去vue文档找!
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'development',
    // 入口: 要使用webpack打包哪个文件
    entry: './src/main.js',
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: 'index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // 请确保引入这个插件！
        new VueLoaderPlugin()


    ],
    // sourcemap工具 
    // 报错 提示 到我们自己写的文件中 , 而不是默认打包后的bundle.js
    devtool: 'inline-source-map',
    // webpack-dev-server 本地服务器
    // 会把'./dist' 目录下的所有资源放在服务器的根目录
    //在package.json中 scripts:{start:webacpk-dev-server --open}  -> npm start / npm run start

    devServer: {
        contentBase: './dist',
        hot: true
    },
    // 出口: 打包的结果所在的位置
    output: {
        //   __dirname->获取到当前文件的根目录
        // ./dist/bundle.js
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            // 当要打包.css文件时 用css-loader和style-loader去打包
            test: /\.css$/,
            // []中的loader顺序执行 是从后往前
            // css-loader 把css代码进行打包
            // style-loader 把css代码放在style标签中
            use: [
                'style-loader',
                'css-loader'
            ]
        }, {
            test: /\.(png|svg|jpg|gif|jpeg)$/,
            use: [
                'file-loader'
            ]
        }, {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        }]
    }
};